<template>
	<view class="home">
		<swiper indicator-dots circular autoplay>
			<swiper-item v-for="item in swipers" :key="item.id">
				<image :src="item.img"></image>
			</swiper-item>
		</swiper>
		<!-- 导航区 -->
		<view class="nav">
			<view class="nav_item" v-for="(item,index) in navs" :key="index" @click="navItemClick(item.path)">
				<view :class="item.icon"></view>
				<text>{{item.title}}</text>
			</view>
		</view>
		<!-- 推荐商品区 -->
		<view class="hot_goods">
			<view class="title">推荐商品</view>
			<goods-list :goods1="goods" @goodsItemClick="getGoodsDetails"></goods-list>
		</view>
	</view>
</template>

<script>
	import goodsList from '../../components/goods-list/goods-list.vue'
	export default {
		data() {
			return {
				swipers:[],
				goods:[],
				navs:[
					{
						icon:"iconfont icon-ziyuan",
						title:"买点超市",
						path:"/pages/goods/goods"
					},
					{
						icon:"iconfont icon-guanyuwomen",
						title:"练习我们",
						path:"/pages/contact/contact"
					},
					{
						icon:"iconfont icon-tupian",
						title:"社区图片",
						path:"/pages/pics/pics"
					},
					{
						icon:"iconfont icon-shipin",
						title:"视频专区",
						path:"/pages/videos/videos"
					}
				]
			}
		},
		onLoad() {
			this.getSwipers()
			this.getHotGoods()
		},
		components:{"goods-list":goodsList},
		methods: {
			// 获取轮播图的数据
			// 方法三
			async getSwipers(){
				const res = await this.$myRequest({
					url:"/api/getlunbo",
				}) 
				this.swipers = res.data.message 
			},
			// 方法二
			// async getSwipers(){
			// 	const res = await uni.request({
			// 		url:"http://localhost:8082/api/getlunbo",
			// 		method:"GET",
			// 	})
			// 	this.swipers = res.data.message
			// }
			// 方法一
			// getSwipers(){
			// 	uni.request({
			// 		url:"http://localhost:8082/api/getlunbo",
			// 		method:"GET",
			// 		success:(res) => {
			// 			if(res.data.status !== 0){
			// 				return uni.showToast({
			// 					title:"获取数据失败！"
			// 				})
			// 			}
			// 			this.swipers = res.data.message
			// 		}
			// 	})
			// }
			// 获取热门商品列表数据
			async getHotGoods(){
				const res = await this.$myRequest({
					url:"/api/getgoods?pageindex=1"
				})
				this.goods = res.data.message
			},
			// 导航点击处理函数
			navItemClick(url){
				uni.navigateTo({
					url,
				})
			},
			// 跳转到导航商品详情页
			getGoodsDetails(id){
				uni.navigateTo({
					url:'/pages/goods-detail/goods-detail?id='+id
				})
			}
		}
	}
</script>

<style lang="scss">
	.home{
		swiper{
			width: 750rpx;
			height: 380rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.nav{
			display: flex;
			.nav_item{
				width: 25%;
				text-align: center;
				view{
					width: 120rpx;
					height: 120rpx;
					background-color: $shop-color;
					border-radius: 50%;
					color:white;
					margin: 10px auto;
					line-height: 120rpx;
					font-size:50rpx;
				}
				.icon-tupian{
					font-size: 45rpx;
				}
				text{
					font-size: 30rpx;
				}
			}
		}
		.hot_goods{
			background-color: #eee;
			overflow: hidden;
			margin-top: 10px;
			.title{
				height: 50px;
				line-height: 50px;
				color:$shop-color;
				text-align: center;
				letter-spacing: 20px;
				background-color: #fff;
				margin: 5px 0;
			}
		}
	}
	
</style>
